import React, { Component } from 'react';
import { View, Text, Image } from '@tarojs/components'
import Iconfont from '../Iconfont'
const defaultImgUrl = 'https://static3.jekunauto.com/img/others/cartom-baby.png'

import './index.scss'

type Props = {
  defaultUrl?: String
  originalUrl: String
  icon?: any
  iconWrapColor?: String
  iconColor?: any
  iconSize?: Number | String
  text?: String
  textSize: String
  textColor: String
  textTop: String
  showText: Boolean
  mode?: any
  lazyLoad?: Boolean
  width?: String | Number
  height?: String | Number
  onError?: any
  onLoad?: any
}
type State = {
  finishLoadFlag: Boolean
  errorLoad: Boolean
}
class ImgLoader extends Component<Props, State> {
  static defaultProps = {
    defaultUrl: '',
    mode: 'scaleToFill',
    webp: false,
    lazyLoad: true,
    showMenuByLongpress: false,
    width: 'auto',
    iconWrapColor: '#F5F5F5',
    iconColor: '#dbdbdb',
    height: 'auto',
    icon: 'icon-jiqunheihekatongrenwu-1',
    iconSize: '64',
    text: '暂无图片',
    textSize: '24rpx',
    textColor: '#999999',
    textTop: '0rpx',
    showText: false,
    onError: () => {},
    onLoad: () => {}
  }
  constructor() {
    super(...arguments)
    this.state = {
      finishLoadFlag: false,
      errorLoad: false
    }
  }

  handleError(...arg) {
    this.setState({
      errorLoad: true
    })
    this.props.onError(...arg)
  }
  handleLoad(...arg) {
    this.setState({
      finishLoadFlag: true
    })
    this.props.onLoad(...arg)
  }
  UNSAFE_componentWillReceiveProps(nextProps) {

  }

  componentDidMount() {

  }

  UNSAFE_componentWillMount() {
  }

  render() {
    const {
      defaultUrl,
      originalUrl,
      width,
      height,
      mode,
      lazyLoad,
      icon,
      iconWrapColor,
      iconColor,
      iconSize,
      text,
      textColor,
      textSize,
      textTop,
      showText
    } = this.props
    // const { finishLoadFlag, errorLoad } = this.state
    let wapConStyles = {
      width: typeof width === 'string' ? width : `${width}rpx`,
      height: typeof height === 'string' ? height : `${height}rpx`,
      backgroundColor: String(iconWrapColor)
    }
    let conStyles = {
      width: typeof width === 'string' ? width : `${width}rpx`,
      height: typeof height === 'string' ? height : `${height}rpx`
    }
    let defaultImgStyle =  {
      width: `${Number(iconSize)}rpx`,
      height: `${Number(iconSize)}rpx`
    }
    let textStyles = {
      fontSize: String(textSize),
      color: String(textColor),
      marginTop: String(textTop)
    }
    // let defaultText = text ? text : '暂无图片'

    let placeholderView = <View
      style={wapConStyles}
      className="pla-view"
    >
      <Iconfont size={iconSize} color={iconColor} name={icon} />
      { showText && <View style={textStyles}>{ text }</View>}
    </View>
    let defaultImg = defaultUrl ? defaultUrl: defaultImgUrl
    let defaultImageView = <View className='error-default-wrap'style={wapConStyles}>
      <Image
        src={String(defaultImg)}
        mode="aspectFit"
        style={defaultImgStyle}
      />
      { showText && <View style={textStyles}>{ text }</View>}
    </View>
    let originImageView = <Image
      src={String(originalUrl)}
      style={conStyles}
      mode={mode}
      lazyLoad={Boolean(lazyLoad)}
      onLoad={this.handleLoad.bind(this)}
      onError={this.handleError.bind(this)}
    />
    return (
      <View className='img-loader-wrap' style={conStyles}>
        { originImageView }
        { (!!defaultUrl) && !finishLoadFlag && defaultImageView }
      </View>
    )
  }
}

export default ImgLoader
